<template>
  <div id="app">
    <div id="nav">
      <router-link to="/home">插值绑定</router-link> |
      <router-link to="/about">时钟</router-link> |
      <router-link to="/tabs">Tab切换</router-link> |
      <router-link to="/weread">微信读书</router-link> ｜
      <router-link to="/event">事件</router-link> |
      <router-link to="/contextmenu">右击菜单</router-link> |
      <router-link to="/form">表单</router-link> |
      <router-link to="/validate">表单校验</router-link> |
      <router-link to="/slider">滑块输入</router-link> |
      <router-link to="/Computed">计算属性</router-link> |
      <router-link to="/Watch">侦听器</router-link> |
      <router-link to="/ScrollLoad">滚动加载</router-link> |
      <router-link to="/PullRefresh">下拉刷新</router-link> |
      <router-link to="/Todos">Todos</router-link> |
      <router-link to="/Component">Component</router-link> |
      <router-link to="/AlbumList">唱片列表</router-link> |
      <router-link to="/VModel">组件的v-model</router-link> |
      <router-link to="/Life">组件生命周期</router-link> |
      <router-link to="/main">管理后台</router-link> |
      <router-link to="/stock/list">库存管理</router-link> |
      <router-link to="/basket/index">菜篮子</router-link> |
      <router-link to="/basket-vuex/index">菜篮子(Vuex)</router-link> |
      <!--
        router-link 是 vue-router路由库提供的组件，用来生成跳转链接，相当于a标签
        to 属性是定义路由时的 path
       -->
    </div>

    <!-- 实现路由切换需要容器 -->
    <router-view/>

    <favorite-box />
  </div>
</template>

<script>
import FavoriteBox from './components/FavoriteBox.vue';

export default {
  components: {
    FavoriteBox
  }
}
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-active {
      color: #42b983;
    }
  }
}
</style>

<style>
    * {
      margin: 0;
      padding: 0;
      border: 0;
    }
    ul, ol {
      list-style: none;
    }
    li {
      list-style: none;
    }
</style>
